<template>
  <view class="wrapper">
    <t-header @back="back">{{ title }}</t-header>
    <!-- <tt-navbar :left="true" title="新股申购" rightText="申购记录" @lclick="navBack" @rclick="goRecord"></tt-navbar> -->
    <view class="page">
      <tui-no-data
        v-if="list.length == 0"
        imgUrl="/static/images/nodata.png"
        :imgWidth="179 * 2"
        :imgHeight="126 * 2"
      >
        <text>暂无新股</text>
      </tui-no-data>
      <view v-for="(item, index) in list" :key="index">
        <view class="tit">{{ item.sg_date }}</view>
        <view
          class="item"
          @click="toDetail(stock)"
          v-for="(stock, sIndex) in item.sub_info"
          :key="sIndex"
        >
          <view class="flex align-center item-top padding-bottom-sm">
            <!-- 这边修改下 sg_type -->
            <image
              class="bs"
              v-if="stock.sg_type == 4"
              src="../../static/images/icons/bj.png"
              mode=""
            >
            </image>
            <image
              class="bs"
              v-else-if="stock.sg_type == 1 || stock.sg_type == 5"
              src="../../static/images/icons/sh.png"
              mode=""
            ></image>
            <image
              class="bs"
              v-else-if="stock.sg_type == 2 || stock.sg_type == 3"
              src="../../static/images/icons/sz.png"
              mode=""
            ></image>
            <text class="flex-sub">{{ stock.name }} {{ stock.code }}</text>
            <view class="text-orange">详情+</view>
          </view>
          <view class="padding-top-sm flex justify-between text-nomal">
            <view class="text-left">
              <view class="num">￥{{ stock.fx_price }}</view>
              <view class="margin-top-sm title">发行价格</view>
            </view>
            <view class="text-center">
              <view class="num">{{ stock.zq_rate }}%</view>
              <view class="margin-top-sm title">中签率</view>
            </view>
            <view class="text-right">
              <view class="num">{{ formatNumberUnit(stock.fx_num) }}股</view>
              <view class="margin-top-sm title">发行总数</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { formatNumberUnit } from '@/utils/stock.js';
  import { newStockList } from '@/api/index.js';
  import tHeader from '@/components/views/t-header/index.vue';

  const list = ref([]);
  const title = ref('新股申购');

  const getNewStocks = async () => {
    try {
      const res = await newStockList({
        page: 1,
        type: 0,
      });

      res.data.list.forEach((v) => {
        v.sub_info.forEach((v2) => {
          v2.zq_rate = (v2.zq_rate * 100).toFixed(2);
        });
      });

      list.value = res.data.list;
      // list.value = [
      //   {
      //     sg_date: '2025-01-24',
      //     sub_info: [
      //       {
      //         sg_type: 1,
      //         name: '电子ss',
      //         code: '125454',
      //         fx_price: 455,
      //         zq_rate: 48,
      //         fx_num: 455,
      //       },
      //       {
      //         sg_type: 1,
      //         name: '电子ss',
      //         code: '125454',
      //         fx_price: 455,
      //         zq_rate: 48,
      //         fx_num: 455,
      //       },
      //     ],
      //   },
      // ];
    } catch (error) {
      console.error('Error fetching new stocks:', error);
    }
  };

  const back = () => {
    uni.navigateBack();
  };

  const toDetail = (item) => {
    uni.navigateTo({
      url: './new-detail?id=' + item.id,
    });
  };

  const goRecord = () => {
    uni.navigateTo({
      url: '/pages/shengou/index',
    });
  };

  onMounted(() => {
    getNewStocks();

    // Handle route parameters
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];

    const query = currentPage.$page.options;
    if (query.name) {
      title.value = query.name;
    }
  });
</script>
<style lang="scss" scoped>
  .wrapper {
    background: #f5f5f5;
  }
  .nav-box {
    padding-left: 18rpx;
    display: flex;
    align-items: center;
    margin-top: 24rpx;
    &-title {
      margin-left: 14rpx;
      font-size: 44rpx;
      font-weight: 500;
      color: #000;
    }
  }

  .page {
    padding: 20rpx 16rpx 20rpx 18rpx;
    min-height: calc(100vh - 5rem);
    box-sizing: border-box;
    background-color: #f5f5f5;
  }

  .bs {
    width: 28rpx;
    height: 28rpx;
    margin-right: 14rpx;
  }

  .tit {
    font-size: 42rpx;
    font-weight: bold;
    margin-left: 44rpx;
  }

  .item {
    height: 222rpx;
    overflow: hidden;
    background: #fff;
    padding: 20rpx;
    color: #000;
    font-size: 32rpx;
    border-radius: 34rpx;
    margin-top: 22rpx;
    .item-top {
      border-bottom: 2rpx solid #e2e2e2;
    }
    .text-orange {
      color: #f13444;
    }
    .num {
      font-size: 26rpx;
      font-weight: bold;
    }
    .title {
      font-size: 24rpx;
      color: #8f8f8f;
      font-weight: 400;
    }
  }
</style>
